<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8" />
	<meta name = "viewport" content = "target-densitydpi=device-dpi,width=device-width,initial-scale=1.0,user-scalable=no" />
	<meta name = "apple-mobile-web-app-capable" content = "yes" />
	<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
	<title>Fresh Note</title>
	<link rel = "stylesheet" href = "../../css/jquery.mobile.css" />
	<link rel = "stylesheet" href = "../../css/function.css" />
	<link rel = "stylesheet" href = "../../css/style.css" />
	<script src = "../../js/jquery.js"></script>
	<script src = "../../js/function.js"></script>
	<script src = "../../js/jquery.mobile.js"></script>
	<!-- My Css -->
	<style>
	</style>
</head>
<body>
<div data-role = "page" class = "bx-page">
	<!--头部栏-->
	<div data-role = "header" class = "bx-header">
		<div class = "ui-btn-left bx-food-add-btn"></div>
		<h3 class = "bx-logo"></h3>
		<div class = "ui-btn-right bx-list-to-block-btn"></div>
	</div>
	<!--主显示区，块状样式-->
	<div class = "bx-index-list-main">
		<div class = "bx-list-food-head"></div>
		<ul>
			<li>
				<div class = "bx-list-one-food bx-fresh-bad bx-type-greens">
					<div class = "bx-list-food-info">
						<p class = "bx-list-food-day">1</p>
						<div class = "bx-list-food-day-det">
							<p class = "bx-list-food-day-str">保质期3天</p>
							<p class = "bx-list-food-day-pub">生产日期：2013-4-5</p>
						</div>
					</div>
					<div class = "bx-list-food-type"></div>
				</div>
			</li>
			<li>
				<div class = "bx-list-one-food bx-fresh-bad bx-type-fruit">
					<div class = "bx-list-food-info">
						<p class = "bx-list-food-day">1</p>
						<div class = "bx-list-food-day-det">
							<p class = "bx-list-food-day-str">保质期4天</p>
							<p class = "bx-list-food-day-pub">生产日期：2013-4-5</p>
						</div>
					</div>
					<div class = "bx-list-food-type"></div>
				</div>
			</li>
			<li>
				<div class = "bx-list-one-food bx-fresh-bad bx-type-meat">
					<div class = "bx-list-food-info">
						<p class = "bx-list-food-day">2</p>
						<div class = "bx-list-food-day-det">
							<p class = "bx-list-food-day-str">保质期3天</p>
							<p class = "bx-list-food-day-pub">生产日期：2013-4-5</p>
						</div>
					</div>
					<div class = "bx-list-food-type"></div>
				</div>
			</li>
			<li>
				<div class = "bx-list-one-food bx-fresh-normal bx-type-rice">
					<div class = "bx-list-food-info">
						<p class = "bx-list-food-day">3</p>
						<div class = "bx-list-food-day-det">
							<p class = "bx-list-food-day-str">保质期10天</p>
							<p class = "bx-list-food-day-pub">生产日期：2013-4-5</p>
						</div>
					</div>
					<div class = "bx-list-food-type"></div>
				</div>
			</li>
			<li>
				<div class = "bx-list-one-food bx-fresh-normal bx-type-meat">
					<div class = "bx-list-food-info">
						<p class = "bx-list-food-day">3</p>
						<div class = "bx-list-food-day-det">
							<p class = "bx-list-food-day-str">保质期6天</p>
							<p class = "bx-list-food-day-pub">生产日期：2013-4-5</p>
						</div>
					</div>
					<div class = "bx-list-food-type"></div>
				</div>
			</li>
			<li>
				<div class = "bx-list-one-food bx-fresh-normal bx-type-greens">
					<div class = "bx-list-food-info">
						<p class = "bx-list-food-day">3</p>
						<div class = "bx-list-food-day-det">
							<p class = "bx-list-food-day-str">保质期4天</p>
							<p class = "bx-list-food-day-pub">生产日期：2013-4-5</p>
						</div>
					</div>
					<div class = "bx-list-food-type"></div>
				</div>
			</li>
			<li>
				<div class = "bx-list-one-food bx-fresh-normal bx-type-fruit">
					<div class = "bx-list-food-info">
						<p class = "bx-list-food-day">4</p>
						<div class = "bx-list-food-day-det">
							<p class = "bx-list-food-day-str">保质期7天</p>
							<p class = "bx-list-food-day-pub">生产日期：2013-4-5</p>
						</div>
					</div>
					<div class = "bx-list-food-type"></div>
				</div>
			</li>
			<li>
				<div class = "bx-list-one-food bx-fresh-good bx-type-coke">
					<div class = "bx-list-food-info">
						<p class = "bx-list-food-day">5</p>
						<div class = "bx-list-food-day-det">
							<p class = "bx-list-food-day-str">保质期30天</p>
							<p class = "bx-list-food-day-pub">生产日期：2013-4-5</p>
						</div>
					</div>
					<div class = "bx-list-food-type"></div>
				</div>
			</li>
			<li>
				<div class = "bx-list-one-food bx-fresh-good bx-type-rice">
					<div class = "bx-list-food-info">
						<p class = "bx-list-food-day">5</p>
						<div class = "bx-list-food-day-det">
							<p class = "bx-list-food-day-str">保质期15天</p>
							<p class = "bx-list-food-day-pub">生产日期：2013-4-5</p>
						</div>
					</div>
					<div class = "bx-list-food-type"></div>
				</div>
			</li>
			<li>
				<div class = "bx-list-one-food bx-fresh-good bx-type-fruit">
					<div class = "bx-list-food-info">
						<p class = "bx-list-food-day">6</p>
						<div class = "bx-list-food-day-det">
							<p class = "bx-list-food-day-str">保质期10天</p>
							<p class = "bx-list-food-day-pub">生产日期：2013-4-5</p>
						</div>
					</div>
					<div class = "bx-list-food-type"></div>
				</div>
			</li>
			<li>
				<div class = "bx-list-one-food bx-fresh-good bx-type-meat">
					<div class = "bx-list-food-info">
						<p class = "bx-list-food-day">6</p>
						<div class = "bx-list-food-day-det">
							<p class = "bx-list-food-day-str">保质期15天</p>
							<p class = "bx-list-food-day-pub">生产日期：2013-4-5</p>
						</div>
					</div>
					<div class = "bx-list-food-type"></div>
				</div>
			</li>
		</ul>
	</div>

	<!--隐藏的A元素，用于预加载数据-->
	<a href = "index.html" data-prefetch class = "f-dn"></a> <a href = "add-1st.html" data-prefetch class = "f-dn"></a>
	<a href = "detail.html" data-prefetch class = "f-dn"></a>

	<!--在PAGE内部的执行脚本-->
	<script>
		//点击转向块状样式的按钮
		$(".bx-list-to-block-btn").on("click", function(){
			$.mobile.changePage("index.html", {transition:"flip", changeHash:false, reverse:"true"});
		});

		//点击添加按钮
		$(".bx-food-add-btn").on("click", function(){
			$.mobile.changePage("add-1st.html", {transition:"slide", changeHash:true});
		});

		//点击每一个食物块进详情页
		$(".bx-list-food-type").on("click", function(){
			$.mobile.changePage("detail.html", {transition:"slide", changeHash:true});
		});

		$(".bx-list-food-info").on("click", function(){
			$.mobile.changePage("detail.html", {transition:"slide", changeHash:true});
		});
	</script>
</div>
</body>
<!--
Author: Baoxu
Date:   13-4-22
Time:   上午9:59
-->
</html>